<template>
  <div class="myappointment-content">
    <back-bar title="我的预约" @toBack="toBack" />
    <van-sticky :offset-top="50">
      <van-tabs v-model="active" @click="onClick">
        <van-tab title="待处理" />
        <van-tab title="待看房" />
        <van-tab title="待评价" />
        <van-tab title="租房成功" />
      </van-tabs>
    </van-sticky>
    <keep-alive>
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";

export default {
  name: "myappointment",
  components: {
    BackBar,
  },
  data() {
    return {
      active: 0,
      routerPath: [
        "/myappointment/pending",
        "/myappointment/awaitlookhouse",
        "/myappointment/awaitvluate",
        "/myappointment/successhouse"
      ],
    };
  },
  methods: {
    toBack() {
      this.$router.push("/mine");
    },
    onClick(index) {
      this.$router.push(this.routerPath[index]);
    },
  },
  created() {
    console.log(this.$route.path);
    this.active = this.routerPath.indexOf(this.$route.path);
  },
};
</script>

<style scoped>
.myappointment-content {
  padding-top: 50px;
  margin-bottom: 20px;
}
</style>